<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 对冒泡事件不处理 -->
        <div style="width: 200px;;height: 200px;background-color:red;" @click="parent">
            <div style="width: 100px;;height: 100px;background-color:blue;" @click="child"></div>
        </div>
        <hr>
        <!-- 阻止事件冒泡了 -->
        <div style="width: 200px;;height: 200px;background-color:red;" @click="parent">
            <div style="width: 100px;;height: 100px;background-color:blue;" @click.stop="child"></div>
        </div>

        <a href="https://www.baidu.com" @click.prevent="parent">点我</a>

        <div style="width: 200px;;height: 200px;background-color:red;" @click.self="parent">
            <div style="width: 100px;;height: 100px;background-color:blue;" @click="child"></div>
        </div>
<hr>
        <div style="width: 200px;;height: 200px;background-color:red;" @click.once="parent">
            <div style="width: 100px;;height: 100px;background-color:blue;" @click="child"></div>
        </div>
        <input type="text" name="" @keyup.enter="submit">
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{
            parent() {
                alert('parent')
            },
            child() {
                alert('child')
            }
        }
    })
</script>